What is cascading used for?
It is used to resolve style conflicts.
It is divided into three parts, and the comparison order is as follows:
- Priority
- Specificity (Weight? Specificity? Different opinions online)
- Source order
First is priority. If the priority can solve the conflict, there is no need to compare the following.
The comparison order of priority is:
- Author style sheet!important
- Default style sheet!important
- Author style sheet
- Default style sheet
If there are still conflicts after comparing the priority, then specificity needs to be compared.
When comparing here, four numbers will be generated for comparison (?,?,?,?).
When there is a style conflict, the comparison starts from the first value. The larger value is the winner. If they are the same, compare the next digit.
The first number can only be 0 or 1. When it is written in an inline style, it is 1. If not, it is 0. So generally, when comparing, if there is no inline style, there are three values to compare (?,?,?).
The second number is the number of IDs in the selector.
The third number is the number of class selectors, pseudo-class selectors, and attribute selectors in the selector.
The last number is the number of element selectors in the selector.
If specificity is still not determined, then source order needs to be compared.
It means that the order written in the source code overrides the order written earlier.
Okay, that's the comparison order. Finally, I'll give you a quick method to compare specificity without calculating for a long time.
Open VSCode and hover over the CSS you wrote.